<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <script src="avalon.js"></script>
        <meta name="viewport" content="width=device-width">
        <script>
            var rootState = {}
            var Router = function() {
                this.states = {
                    "": rootState
                }
                this.currentState = ""
                this.stateArray = []
            }
            Router.prototype = {
                add: function(obj) {
                    this.registerState(obj, true)
                },
                _transitionTo: function(from, to) {

                    var curr = from
                    var fromList = []
                    do {
                        fromList.push(from)
                    } while ((from = this.states[from].parentNode) != null);

                    var toList = []
                    do {
                        toList.push(to)
                    } while ((to = this.states[to].parentNode) != null);
                    do {
                        if (fromList[fromList.length - 1] === toList[toList.length - 1]) {
                            fromList.pop()
                            toList.pop()
                        } else {
                            break
                        }
                    } while (true)
                    var array = fromList.concat(toList.reverse())
                    if (array[0] == curr) {
                        array.shift()
                    }
                    return array

                }
                ,
                transitionTo: function(to) {
                    var from = this.currentState
                    this.currentState = to
                    return this._transitionTo(from, to)
                },
                registerState: function(obj, recursive) {
                    var state = obj.state //这是一个字符串
                    var match = state.match(/([\.\w]+)\./) || ["", ""]
                    var parentNode = match[1]
                    obj.parentNode = parentNode
                    var parent = this.states[parentNode]
                    if (parent) {
                        parent.children = parent.children || []
                        avalon.Array.ensure(parent.children, obj)
                        this.states[state] = obj
                        avalon.Array.ensure(this.stateArray, obj)
                    }
                    if (recursive) {
                        for (var i = 0, el; el = this.stateArray[i++]; ) {
                            if (el !== obj)
                                this.registerState(el)
                        }
                    }
                }
            }
            var router = new Router
            router.add({state: "contacts"})
            router.add({state: "contacts.list"})
            router.add({state: "contacts.detail"})
            router.add({state: "contacts.detail.item"})
            router.add({state: "home"})
            router.add({state: "home.eee"})
            router.add({state: "abouts"})
            console.log(router)
            router.currentState = "home.eee"
            var array = router.transitionTo("contacts.detail.item")
            console.log(array)

          
        </script>
    </head>

    <body>
        <div>TODO write content</div>
    </body>
</html>
